<section>
    <h1 class="blue" data-id="#plugins/date-time"><i class="ace-icon fa fa-clock-o grey"></i> Date & Time</h1>

    <div class="hr hr-double hr32"></div>

    <!-- #section:plugins/date-time -->
    <div class="help-content">
        <h3 class="info-title smaller" data-id="#plugins/date-time.datepicker">Date picker</h3>
        <!-- #section:plugins/date-time.datepicker -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Bootstrap date picker plugin.
                    <br/>
                    You can find more info at its page:
                    <a href="http://eternicode.github.io/bootstrap-datepicker/">eternicode.github.io/bootstrap-datepicker/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/css/datepicker.css</code>
                    <br/>
                    <code>assets/js/date-time/bootstrap-datepicker.js</code>
                </li>

                <li>
                    It is also recommended to use browser's built-in datepicker if available,
                    which should be better especially on small touch devices:
<pre data-language="html">
 <input type="date" name="mydate" id="mydate"/>
</pre>
<pre data-language="javascript">
 var mydate = $('#mydate')[0];
 if(mydate.type !== 'date') {//if browser doesn't support "date" input
    $(mydate).datepicker({
      //options
    })
 }
</pre>
                </li>

                <li>
                    A basic example would be like this:
<pre data-language="javascript">
$('#my-date-picker-input').datepicker({
   autoclose: true,
   todayHighlight: true
})
</pre>
                </li>

                <li>
                    You can also use the plugin as a daterange picker:
<pre data-language="html">
<div class="input-daterange input-group">
    <input type="text" name="start"/>
    -
    <input type="text" name="end"/>
</div>
</pre>
<pre data-language="javascript">
 $('.input-daterange').datepicker({autoclose:true});
</pre>
                </li>

            </ul>
        </div>
        <!-- /section:plugins/date-time.datepicker -->


        <h3 class="info-title smaller" data-id="#plugins/date-time.daterangepicker">Daterange picker</h3>
        <!-- #section:plugins/date-time.daterangepicker -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Bootstrap daterange picker plugin which uses <a href="http://momentjs.com/">moment.js</a>.
                    <br/>
                    You can find more info at its page:
                    <a href="https://github.com/dangrossman/bootstrap-daterangepicker">https://github.com/dangrossman/bootstrap-daterangepicker</a>
                </li>

                <li>
                    To use it you should include:
                    <br/>
                    <code>assets/css/daterangepicker.css</code>
                    <br/>
                    <code>assets/js/date-time/moment.js</code>
                    <br/>
                    <code>assets/js/date-time/daterangepicker.js</code>
                </li>

                <li>
                    For an example of daterangepicker i118n, see the example at
                    <code>examples/daterange.html</code>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/date-time.daterangepicker -->


        <h3 class="info-title smaller" data-id="#plugins/date-time.timepicker">Time picker</h3>
        <!-- #section:plugins/date-time.timepicker -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Bootstrap time picker plugin.
                    <br/>
                    You can find more info at its page:
                    <a href="http://jdewit.github.io/bootstrap-timepicker/">jdewit.github.io/bootstrap-timepicker/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/css/bootstrap-timepicker.css</code>
                    <br/>
                    <code>assets/js/date-time/bootstrap-timepicker.js</code>
                </li>

                <li>
                    It is also recommended to use browser's built-in time picker if available,
                    which should be better especially on small touch devices:
<pre data-language="html">
 <input type="date" name="mytime" id="mytime"/>
</pre>
<pre data-language="javascript">
 var mytime = $('#mytime')[0];
 if(mytime.type !== 'time') {//if browser doesn't support "time" input
    $(mytime).timepicker({
      //options
    })
 }
</pre>
                </li>

                <li>
                    A basic example would be like this:
<pre data-language="javascript">
$('#timepicker1').timepicker({
    minuteStep: 1,
    showSeconds: true,
    showMeridian: false
})
</pre>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/date-time.timepicker -->


        <h3 class="info-title smaller" data-id="#plugins/date-time.datetimepicker">Datetime picker</h3>
        <!-- #section:plugins/date-time.datetimepicker -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Bootstrap datetime picker plugin which uses <a href="http://momentjs.com/">moment.js</a>.
                    <br/>
                    You can find more info at its page:
                    <a href="https://github.com/Eonasdan/bootstrap-datetimepicker">https://github.com/Eonasdan/bootstrap-datetimepicker</a>
                </li>

                <li>
                    To use it you should include:
                    <br/>
                    <code>assets/css/bootstrap-datetimepicker.css</code>
                    <br/>
                    <code>assets/js/date-time/moment.js</code>
                    <br/>
                    <code>assets/js/date-time/bootstrap-datetimepicker.js</code>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/date-time.datetimepicker -->


        <h3 class="info-title smaller" data-id="#plugins/date-time.fullcalendar">Fullcalendar</h3>
        <!-- #section:plugins/date-time.fullcalendar -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Full calendar plugin with drag & drop functionality.
                    <br/>
                    You can find more info here:
                    <a href="http://fullcalendar.io/">http://fullcalendar.io/</a>
                </li>

                <li>
                    To use it, you should include:
                    <br/>
                    <code>assets/css/fullcalendar.css</code>
                    <br/>
                    <code>assets/js/jquery-ui.custom.js</code> If you want external event drag &amp; drop functionality.
                    <br/>
                    <code>assets/js/date-time/moment.js</code>
                    <br/>
                    <code>assets/js/fullcalendar.js</code>
                </li>

                <li>
                    For an example, please see calendar's example page inside the template.
                    <br/>
                    The Javascript code is located at:
                    <br/>
                    <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>calendar.js</code>
                </li>

                <li>
                    It seems in its latest update, Fullcalendar has event resizing for events
                    with "yyyy-mm-dd" format only (not sure though)
                    <br/>
                    For formatting you can use "moment.js" libary.
<pre data-language="javascript">
 moment().format('YYYY-MM-DD'),
</pre>
                </li>
            </ul>
        </div>
        <!-- /section:plugins/date-time.fullcalendar -->

    </div>
    <!-- /section:plugins/date-time -->
</section>